<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="tabsName" @tab-click="handleClick">
        <el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name" :key="tab.name">
          <!-- 这里是每个标签页的内容 -->
          <el-button v-show="addNoticeDialog" type="primary" @click="handleNotice">添加</el-button>
          <ed-table
            :isBorder="true"
            :loading="false"
            size='mini'
            :isSelection='true'
            :isIndex='true'
            :isPagination='true'
            :isHandle='false'
            :tableData='tableData'
            :tableCols='tab.tableCols'
            :tableHandles='tab.tableHandles'
            :pagination='pagination'
            @refresh="handleCurrentChange"
          ></ed-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog
      :visible.sync="dialogVisible"
      title="弹窗标题"
      width="50%"
    >
      <ed-form
        ref="form"
        size='mini'
        labelWidth = '50px'
        :isHandle = "isHandle"
        :searchData = "searchData"
        :searchForm = "searchForm"
        :searchHandle="searchHandle">
      </ed-form>
      <el-button type="primary" @click="submitForm(rowData)">提交</el-button>
    </el-dialog>

    <el-dialog :title="feedbackTitle" :visible.sync="openFeedback" width="500px" append-to-body>
      <el-form ref="form" :model="rowData" label-width="80px">
        <el-form-item label="是否解决" prop="isSolve">
          <el-select v-model="rowData.isSolve" placeholder="请选择">
            <el-option
              v-for="item in solveStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结果备注">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="form.notes">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="noticeTitle" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="rowData" :rules="rules" label-width="80px">
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="rowData.title" placeholder="请输入公告标题" />
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="rowData.content">
          </el-input>
        </el-form-item>
        <el-form-item label="公寓名称" prop="apartmentId">
          <el-select v-model="rowData.apartmentId" clearable placeholder="请选择">
            <el-option
              v-for="item in apartmentList"
              :key="item.apartmentId"
              :label="item.apartmentName"
              :value="item.apartmentId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {activitiesAppproval, listActivities} from "@/api/business/activities";
  import {listEgressRecords, updateApproveEgressRecords} from "@/api/business/egressRecords";
  import edForm from '@/components/publicComponent/edForm'
  import edTable from '@/components/publicComponent/edTable'
  import {listNurseContent, nurseContentApproval} from "@/api/business/nurseContent";
  import {memberApproval} from "@/api/business/memberInfo";
  import {feedbackProcessResult, listFeedbackInfo} from "@/api/business/feedbackInfo";
  import {addAnnouncements, delAnnouncements, listAnnouncements} from "@/api/business/announcements";
  import {getElderApartment} from "@/api/business/elderInfo";
  import {approvalLeave, listRecord} from "@/api/business/leaveRecord";

  export default {
    components: {
      edTable,
      edForm,
    },
    data() {
      return {
        solveStatus: [{
          value: '0',
          label: '未解决'
        }, {
          value: '1',
          label: '已解决'
        }],
        //按钮是否显示
        // 是否显示弹出层
        noticeTitle:'公告信息',
        feedbackTitle:'反馈处理',
        open: false,
        openFeedback:false,
        form:{},
        addNoticeDialog:false,
        isHandle: false,
        rowData: {},
        dialogVisible: false, // 控制弹窗显示与隐藏的变量
        searchData:{ //查询表单的对应的值
          notes:''
        },
        searchForm:[ //这里是渲染查询表单的表头和类型的数据
          {type:'Input',label:'驳回备注',prop:'notes', width:'180px',placeholder:'请输入...'},
        ],
        noticeData:{ //查询表单的对应的值
          title:'',
          content:'',
          apartmentId:''
        },
        noticeForm:[ //公告发布表单
          {type:'Input',label:'公告标题',prop:'title', width:'180px',placeholder:'请输入姓名...'},
          {type:'Input',label:'公告内容',prop:'content', width:'180px',placeholder:'请输入电话...'},
          {type:'Select',label:'公寓名称',prop:'apartmentId',options:this.apartmentList,width:'180px',change:row=>'',placeholder:'...'},
        ],
        feedbackData:{ //查询表单的对应的值
          title:'',
          content:'',
          apartmentId:''
        },
        feedbackForm:[ //公告发布表单
          {type:'Input',label:'公告标题',prop:'title', width:'180px',placeholder:'请输入姓名...'},
          {type:'Input',label:'公告内容',prop:'content', width:'180px',placeholder:'请输入电话...'},
          {type:'Select',label:'公寓名称',prop:'apartmentId',options:this.apartmentList,width:'180px',change:row=>'',placeholder:'...'},
        ],
        searchHandle:[ //查询和重置按钮
          {label:'添加',type:'primary',size:'mini',handle:this.handleNotice},
          // {label:'重置',type:'primary',handle:this.handleReset}
        ],
        egressRecordsList:{},
        tabsName: 'ACTIVITY_APPOVAL',
        queryParams:{
          pageNum: 1,
          pageSize: 10,
          dateTime:null,
        },
        loading: true,
        activitiesList: [],
        total: 0,
        title: "",
        apartmentList:{},
        memberList:{},
        required: true,
        tabs:[
          {
            label: '活动审批',
            name: 'ACTIVITY_APPOVAL',
            tableCols:[ //表格列数据
              {label: '公寓名称',prop: 'apartmentName'},
              {label:'活动名称',prop:'activityName'},
              {label:'活动时间',prop:'activityDate'},
              {label:'活动描述',prop:'activityDescription'},
              {label:'活动状态',prop:'applyStatus'},
              {label:'活动负责人',prop:'leaderName'},
              {label:'参与人数',prop:'participantCount'},
              {label:'活动预算',prop:'activityPrice'},
              {label:'活动备注',prop:'notes'},
              {
                    label: '操作',
                    type: 'Button',
                    prop: 'actions', // 假设数据中有一个字段存储操作按钮信息
                    width: 150,
                    align: 'center',
                    btnList: [
                      {
                        label: '通过',
                        type: 'text',
                        circle: true,
                        icon: 'el-icon-check',
                        handle: row => {
                          // 编辑操作，row 是当前行的数据
                          this.rowData = row;
                          this.rowData.applyStatus = 'APPLY_PASS'
                          this.handActivitiesApproval(this.rowData)
                          // console.log('编辑', row);
                        }
                      },
                      {
                        label: '驳回',
                        type: 'text',
                        circle: true,
                        icon: 'el-icon-edit',
                        handle: row => {
                          this.dialogVisible = true;
                          this.rowData = row;
                          // 删除操作，row 是当前行的数据
                          console.log('删除', row);
                        }
                      }
                  ]
              }
            ],
          },
          {
            label: '护理定价审批',
            name: 'PRICE_APPOVAL',
            tableCols:[ //表格列数据
              {label: '护理产品编码',prop: 'nurseCode'},
              {label:'护理产品名称',prop:'nurseName'},
              {label:'护理价格(元)',prop:'nursePrice'},
              {label:'描述(说明)',prop:'nurseDescribe'},
              {label:'护理状态',prop:'nurseStatus'},
              {label:'申请人',prop:'applicant'},
              {
                label: '操作',
                type: 'Button',
                prop: 'actions', // 假设数据中有一个字段存储操作按钮信息
                width: 150,
                align: 'center',
                btnList: [
                  {
                    label: '通过',
                    type: 'text',
                    icon: 'el-icon-edit',
                    handle: row => {
                      // 编辑操作，row 是当前行的数据
                      this.rowData = row;
                      this.rowData.nurseStatus = 'ENABLE'
                      this.handNurseContentApproval(this.rowData);
                      console.log('编辑', row);
                    }
                  },
                  {
                    label: '驳回',
                    type: 'text',
                    icon: 'el-icon-delete',
                    handle: row => {
                      // 删除操作，row 是当前行的数据
                      this.dialogVisible = true;
                      this.rowData = row;
                      console.log('删除', row);
                    }
                  }
                ]
              }
            ],
          },
          {
            label: '员工审批',
            name: 'MEMBER_APPOVAL',
            tableCols:[ //表格列数据
              {label: '部门',prop: 'deptName'},
              {label:'姓名',prop:'memberName'},
              {label:'请假开始时间',prop:'leaveTime'},
              {label:'请假结束时间',prop:'backTime'},
              {label:'请假原因',prop:'reason'},
              {label:'备注说明',prop:'notes'},
              {
                label: '操作',
                type: 'Button',
                prop: 'actions', // 假设数据中有一个字段存储操作按钮信息
                width: 150,
                align: 'center',
                btnList: [
                  {
                    label: '通过',
                    type: 'text',
                    icon: 'el-icon-edit',
                    handle: row => {
                      // 编辑操作，row 是当前行的数据
                      this.rowData = row;
                      this.rowData.nurseStatus = 'ENABLE'
                      this.rowData.status = 'APPLY_PASS';
                      this.handMemberLeaveApproval(this.rowData);
                      console.log('编辑', row);
                    }
                  },
                  {
                    label: '驳回',
                    type: 'text',
                    icon: 'el-icon-delete',
                    handle: row => {
                      // 删除操作，row 是当前行的数据
                      this.dialogVisible = true;
                      this.rowData = row;
                      this.rowData.status = 'APPLY_NO_PASS';
                      this.handMemberLeaveApproval(this.rowData);
                      console.log('删除', row);
                    }
                  }
                ]
              }
            ],
          },
          {
            label: '外出审批',
            name: 'EGRESS_SET',
            tableCols:[ //表格列数据
              {label: '老人姓名',prop: 'elderName'},
              {label:'陪同人',prop:'escorted'},
              {label:'陪同人关系',prop:'relation'},
              {label:'陪同人联系电话',prop:'escortedPhone'},
              {label:'外出时间',prop:'awayTime'},
              {label:'外出原因',prop:'awayReson'},
              {label:'预计回来时间',prop:'expectedBackTime'},
              {label:'申请时间',prop:'applyTime'},
              {label:'申请人',prop:'applicant'},
              {
                label: '操作',
                type: 'Button',
                prop: 'actions', // 假设数据中有一个字段存储操作按钮信息
                width: 150,
                align: 'center',
                btnList: [
                  {
                    label: '通过',
                    type: 'text',
                    icon: 'el-icon-edit',
                    handle: row => {
                      // 编辑操作，row 是当前行的数据
                      this.rowData = row;
                      this.rowData.applyStatus = 'APPLY_PASS'
                      this.handleUpdateEgress(this.rowData)
                      console.log('编辑', row);
                    }
                  },
                  {
                    label: '驳回',
                    type: 'text',
                    icon: 'el-icon-delete',
                    handle: row => {
                      // 删除操作，row 是当前行的数据
                      this.dialogVisible = true;
                      this.rowData = row;
                      console.log('删除', row);
                    }
                  }
                ]
              }
            ]
          },
          {
            label: '反馈处理',
            name: 'FEEDBACK_SET',
            tableCols:[ //表格列数据
              {label: '反馈标题',prop: 'feedbackTitle'},
              {label:'反馈类型',prop:'feedbackType'},
              {label:'反馈内容',prop:'feedbackContent'},
              {label:'反馈人',prop:'feedbackPeople'},
              {label:'备注说明',prop:'notes'},
              {
                label: '操作',
                type: 'Button',
                prop: 'actions', // 假设数据中有一个字段存储操作按钮信息
                width: 150,
                align: 'center',
                btnList: [
                  {
                    label: '编辑处理结果',
                    type: 'text',
                    icon: 'el-icon-edit',
                    handle: row => {
                      // 编辑操作，row 是当前行的数据
                      this.rowData = row;
                      // this.rowData.isSolve = '1'
                      this.openFeedback = true;
                      console.log('编辑', row);
                    }
                  },
                ]
              }
            ],
          },
          {
            label: '公告设置',
            name: 'NOTICE_SET',
            tableCols:[ //表格列数据
              {label: '公告标题',prop: 'title'},
              {label:'公告内容',prop:'content'},
              {label:'公寓名称',prop:'apartmentName'},
              {label:'发布日期',prop:'postDate'},
              {label:'发布人',prop:'postedName'},
              {
                label: '操作',
                type: 'Button',
                prop: 'actions', // 假设数据中有一个字段存储操作按钮信息
                width: 150,
                align: 'center',
                btnList: [
                  {
                    label: '删除',
                    type: 'text',
                    icon: 'el-icon-delete',
                    handle: row => {
                      // 删除操作，row 是当前行的数据
                      this.handleNoticeDelete(row);
                      console.log('删除', row);
                    }
                  }
                ]
              }
            ],
          },
        ],
        apiId:'null',
        fieldList:[],
        // 表格
        tableData:[],//表格数据
        tableCols:[ //表格列数据
          {label:'姓名',prop:'name'},
          {label:'年龄',prop:'age'},
        ],
        tableHandles:[  //这是表格和表单之间的一个按钮，我的项目不需要
           {label:'新增',type:'primary',handle:row=>''}
        ],
        pagination:{ //分页数据
          pageSize:10,
          pageNum:1,
          total:0
        },
      };
    },
    created() {
      this.getElderApartmentInfo();
      this.user = this.$store.state.user;
    },
    mounted() {
      this.getTableAndForm(this.tabsName);
    },
    watch: {
      tabsName(newValue, oldValue) {
        // 当 valueToWatch 发生变化时执行逻辑
        console.log('valueToWatch 发生变化', newValue, oldValue);
        // 在这里可以执行相应的操作
        this.getTableAndForm(newValue)
      }
    },
    methods: {
      //此方法是点击分页时触发的查询，
      handleCurrentChange(){
        this.getQuery()
      },
      //获取表格和表单数据
      getTableAndForm(value){
        switch (value) {
          case 'ACTIVITY_APPOVAL':
            this.addNoticeDialog = false;
            //重置tableData
            this.tableData = []
            // 处理 ACTIVITY_APPOVAL 的逻辑
            this.queryParams.applyStatus = "APPLUING";
            this.activitiesApproval(this.queryParams);
            console.log(this.tableData)
            break;
          case 'PRICE_APPOVAL':
            this.addNoticeDialog = false;
            //重置tableData
            this.tableData = []
            // 处理 PRICE_APPOVAL 的逻辑
            this.queryParams.nurseStatus = "APPLUING";
            this.nurseContentApproval(this.queryParams);
            console.log(this.tableData)
            break;
          case 'MEMBER_APPOVAL':
            this.addNoticeDialog = false;
            //重置tableData
            this.tableData = []
            // 处理 MEMBER_APPOVAL 的逻辑
            this.memberLeaveApproval(this.queryParams)
            console.log(this.tableData)
            break;
          case 'EGRESS_SET':
            this.addNoticeDialog = false;
            //重置tableData
            this.tableData = []
            // 处理 EGRESS_SET 的逻辑
            this.queryParams.applyStatus = "APPLUING";
            this.egressApproval(this.queryParams);
            console.log(this.tableData)
            break;
          case 'FEEDBACK_SET':
            //重置tableData
            this.addNoticeDialog = false;
            this.tableData = []
            // 处理 FEEDBACK_APPOVAL 的逻辑
            this.queryParams.isSolve = '0';
            this.feedbackApproval(this.queryParams);
            console.log(this.tableData)
            break;
          case 'NOTICE_SET':
            //重置tableData
            this.addNoticeDialog = true;
            this.tableData = []
            // 处理 NOTICE_SET 的逻辑
            this.getNoticeList(this.queryParams);
            console.log(this.tableData)
            break;
          default :
            console.log('没有这个tab')
        }
        //...
      },
      //查询
      getQuery(){
        //...
      },
      handleQuery(){ //查询
        this.getQuery()
      },
      handleReset(){  //重置
        for(var i in this.searchData){
          this.$set( this.searchData, i, '')
        }
        this.getQuery()
      },
      handleClick() {
      },
      activitiesApproval(query){
        listActivities(query).then(response => {
          this.tableData = response.rows;
          this.pagination.total = response.total;
        }).catch(error =>{
          console.error(error);
        });
      },
      nurseContentApproval(query){
        listNurseContent(query).then(response => {
          this.tableData = response.rows;
          this.pagination.total = response.total;
        }).catch(error =>{
          console.error(error);
        })
      },
      egressApproval(query){
        listEgressRecords(query).then(response => {
          this.tableData = response.rows;
          this.pagination.total = response.total;
          this.loading = false;
        })
      },
      feedbackApproval(query){
        listFeedbackInfo(query).then(response => {
          this.tableData = response.rows;
          this.pagination.total = response.total;
        })
      },
      memberLeaveApproval(query){
        query.status = 'APPLUING';
        listRecord(query).then(response=>{
          this.tableData = response.rows;
          this.pagination.total = response.total;
        })
      },
      // 提交表单
      submitForm(row) {
          this.rowData.notes = this.searchData.notes;
          switch (this.tabsName) {
            case 'ACTIVITY_APPOVAL':
              this.rowData.applyStatus = 'APPLY_NO_PASS'
              this.handActivitiesApproval(this.rowData);
              break;
            case 'PRICE_APPOVAL':
              this.rowData.nurseStatus = 'OUT'
              this.handNurseContentApproval(this.rowData);
              break;
            case 'MEMBER_APPOVAL':
              this.handMemberLeaveApproval(this.rowData);
              break;
            case 'EGRESS_SET':
              this.rowData.applyStatus = 'APPLY_NO_PASS'
              this.handleUpdateEgress(this.rowData);
              break;
            case 'FEEDBACK_SET':
              this.handFeedbackApproval(this.rowData);
              break;
            case 'NOTICE_SET':
              this.addNoticeContent(this.rowData);
              break;
          }
            // 在这里处理表单提交逻辑，row 参数可以根据具体情况传递
            // 这里仅作为示例，返回一个假的操作结果
            console.log(row)
            this.dialogVisible = false; // 打开弹窗显示操作结果
      },
      handActivitiesApproval(query){
        activitiesAppproval(query).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getTableAndForm(this.tabsName);
        })
      },
      handleUpdateEgress(query){
        // const query = {elderId:row.elderId,applyStatus:"APPLY_PASS"}
        updateApproveEgressRecords(query).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getTableAndForm(this.tabsName);
        })
      },
      handNurseContentApproval(query){
        nurseContentApproval(query).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getTableAndForm(this.tabsName);
        })
      },
      handMemberLeaveApproval(rows){
        approvalLeave(rows).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getTableAndForm(this.tabsName);
        })
      },
      handFeedbackApproval(query){
        feedbackProcessResult(query).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.openFeedback = false;
          this.getTableAndForm(this.tabsName);
        })
      },
      addNoticeContent(data){
        data.postedId = this.user.id;
        addAnnouncements(data).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.open = false;
          this.getTableAndForm(this.tabsName);
        })
      },
      getNoticeList(query){
        listAnnouncements(query).then(response => {
          this.tableData = response.rows;
        })
      },
      getElderApartmentInfo(){
        getElderApartment().then(response =>{
          this.apartmentList = response.rows
        })
      },
      /** 删除按钮操作 */
      handleNoticeDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除公告标题为"' + row.title + '"的数据项？').then(function() {
          return delAnnouncements(ids);
        }).then(() => {
          this.getTableAndForm(this.tabsName);
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      handleNotice(){
        // this.searchForm = this.noticeForm;
        // this.searchData = this.noticeData;
        this.open = true;
      },
      cancel() {
        this.open = false;
        this.openFeedback = false;
        this.reset();
      },
      reset(){

      }
    }
  }
</script>
<style></style>
